html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	position: relative;
	color: #333;
	background: #f0f2f5;
	font-size: $fs_def;
}

// flex布局
.flex {
	display: flex;
}
.inline-flex {
	display: inline-flex;
}

.flex-auto {
	flex: 1;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.inline-flex-between {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}

.inline-flex-around {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
}
.inline-flex-center {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

//宽、高完整填充
.full-box {
	width: 100% !important;
	height: 100% !important;
}

/* 竖直对齐相关 */
.inline-block {
	display: inline-block;
}

.vt {
	vertical-align: top;
}

.vm {
	vertical-align: middle;
}

.vb {
	vertical-align: bottom;
}

/* 定位相关 */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed-center {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* 手指相关 */
.cursor-pointer {
	cursor: pointer;
}
.cursor-text {
	cursor: text;
}

/* 文本相关 */
.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-ellipsis {
	word-spacing: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.text-nowrap {
	word-spacing: keep-all;
	white-space: nowrap;
}

@for $i from 4 through 36 {
	@if $i % 2 == 0 {
		/* ======= margin相关 start ======= */
		//上边距
		.mt-#{$i} {
			margin-top: #{$i}px;
		}

		//下边距
		.mb-#{$i} {
			margin-bottom: #{$i}px;
		}

		//左边距
		.ml-#{$i} {
			margin-left: #{$i}px;
		}

		//右边距
		.mr-#{$i} {
			margin-right: #{$i}px;
		}

		/* ======= margin相关 end ======= */

		/* ======= padding相关 start ======= */
		//上填充
		.pt-#{$i} {
			padding-top: #{$i}px;
		}

		//下填充
		.pb-#{$i} {
			padding-bottom: #{$i}px;
		}

		//左填充
		.pl-#{$i} {
			padding-left: #{$i}px;
		}

		//右填充
		.pr-#{$i} {
			padding-right: #{$i}px;
		}

		/* ======= padding相关 end ======= */
	}
}
